<template>
    <div>
      <div v-if="dictName === ''">
        <div class="my-code">点击服务商查看详情</div>
      </div>
      <div v-else>
        <!--工具栏-->
        <div class="head-container">
          <!-- 搜索 -->
          <div style="margin-bottom: 10px;display: flex;justify-content: space-between; ">
            <div>
              <el-button type="primary" @click="toggleType(2)" >商家</el-button> 
               <el-button type="primary" @click="toggleType(1)">会员</el-button>
            </div>
            <div>
              <el-button class="filter-item" size="mini" type="primary"  icon="el-icon-plus" @click="showEditFormDialog()">添加</el-button>
            </div>
          </div>
          <el-input v-model="query.nickname" clearable size="small" placeholder="输入用户名称查询" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
          <!-- <el-input v-model="query.label" clearable size="small" placeholder="输入字典标签查询"  @keyup.enter.native="toQuery" /> -->
          <!-- <el-select v-model="value"multiple filterable remote reserve-keyword style="width: 200px;" class="filter-item" placeholder="请输入关键词":remote-method="remoteMethod":loading="loading">
            <el-option v-for="item in options" :key="item.value" :label="item.label":value="item.value"></el-option>
          </el-select> -->
          
        </div>
        <!--表单组件-->
        <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" title="添加下级" width="500px">
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
            <el-form-item label="用户名称" prop="junior">
          <el-select v-model="form.junior" filterable remote  reserve-keyword placeholder="请选择用户" clearable 
            :remote-method="remoteMethod" :loading="selectLoading">
            <el-option v-for="item in UserList" :key="item.uid" :label="item.nickname" :value="item.uid">
            </el-option>
          </el-select>
              <!-- <el-input v-model="form.label" style="width: 370px;" /> -->
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="cancel">取消</el-button>
            <el-button type="primary" @click="submit">确认</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table v-loading="loading" :data="data" style="width: 100%;">
       
          <el-table-column prop="avatar" label="头像" >
            <template slot-scope="scope">
              <img :src="scope.row.avatar" width="50px" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="nickname" label="名称" />
          <el-table-column prop="phone" label="手机号" >
            <template slot-scope="scope">
              {{ scope.row.phone?scope.row.phone:'暂无' }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" width="130px" align="center" fixed="right">
            <template slot-scope="scope">
              <el-popover
                :ref="scope.row.id"
                placement="top"
                width="180"
              >
                <p>确定删除本条数据吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
                  <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
                </div>
                <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
              </el-popover>
            </template>
          </el-table-column> -->
        </el-table>
        <!--分页组件-->
        <el-pagination
          :total="total"
          :current-page="page + 1"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </div>
  </template>
  
  <script>
  import crud from '@/mixins/crud'
  import {move,yxUser,yxUserDelete} from '@/api/service'
  
  export default {
    mixins: [crud],
    data() {
      return {
        options: [],
        query:{
            type:2,
            uid:''
        },
        value: [],
        list: [],
        UserList:[],
        selectLoading:false,
        loading: false,
        title: '服务商详情',
        sort: ['sort,asc', 'id,desc'],
        dictName: '',
        form: {
          junior:'',//下级
          superiors:'',//上级
        },
        rules: {
          junior: [
            { required: true, message: '请选择用户名称', trigger: 'blur' }
          ],
         
        }
      }
    },
    methods: {
      submit(){
        move(this.form).then(res=>{

            this.dialog=false
            this.form.junior=''

            this.$alert(res.msg, '提示', {
          confirmButtonText: '确定',
          callback: action => {
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
          }
        });

            this.toQuery()

        })
        console.log(this.form,"this.form")
      },
      toggleType(type){
        this.query.type=type
        this.$emit('toggle',type)
        this.toQuery()
      },
      remoteMethod(query) {
        console.log(query,'query==========')

          if (query !== '') {
            this.selectLoading = true;
            yxUser({
              // isPrize: 1,
              roleLevel:this.query.type,

              isService:0,
              nickname:query
            }).then(res => {
              console.log("==============")
              this.selectLoading = false;
              this.UserList = res.content
            })
          } else {
            this.UserList = [];
          }
    },
      //   remoteMethod(query) {
      //   if (query !== '') {
      //     this.loading = true;
      //     setTimeout(() => {
      //       this.loading = false;
      //       this.options = this.list.filter(item => {
      //         return item.label.toLowerCase()
      //           .indexOf(query.toLowerCase()) > -1;
      //       });
      //     }, 200);
      //   } else {
      //     this.options = [];
      //   }
      // },
      // 获取数据前设置好接口地址
      beforeInit() {
        this.url = 'api/get/service/junior/list'
        if (this.dictName) {
          this.params['dictName'] = this.dictName
        }
        return true
      }
    }
  }
  </script>
  
  <style rel="stylesheet/scss" lang="scss" scoped>
    /deep/ .el-input-number .el-input__inner {
      text-align: left;
    }
  </style>
  